<template lang="pug">
.view.cp-product-test.fix-flex-pos
  .test-search
    el-form(:inline="true")
      el-form-item(label="产品 :")
        el-select.select-width(v-model="product", placeholder="请选择")
          el-option(
            v-for="(item, index) in productSelect",
            :key="index",
            :label="item.name",
            :value="item.value")
      el-form-item
        el-input(
          v-model="proName",
          placeholder="ID/标题",
          style="width: 200px")
      el-form-item
        el-checkbox-group(v-model="action")
          el-checkbox-button(
            v-for="item in actionSelect",
            :label="item.value",
            :key="item.name") {{item.name}}
      el-form-item
        el-button(type="primary", @click="search") 搜索
        //- el-button(type="primary", @click="createTest") 新建测试
      el-form-item
        el-dropdown(trigger="click", @command="createTest")
          el-button(type="primary") 新建测试
            i.el-icon-arrow-down.el-icon--right
          el-dropdown-menu(slot="dropdown")
            el-dropdown-item(
              v-for="item in testTypeSelect", :key="item.value", :command="item.value", v-text="item.name")
      el-form-item
        el-button 导入
      el-form-item
        el-button 导出
  .left-wrap(v-loading="treeLoading")
    product-basic-tree(:detail="treeData")
  //- 查询
  .right-wrap
    //- 表格
    .test-table
      el-table(
        :data="dataList",
        highlight-current-row,
        v-loading="loadingData",
        size="mini",
        height="100%")
        el-table-column(show-overflow-tooltip, prop="id", label="ID")
        el-table-column(show-overflow-tooltip, prop="title", label="标题")
        el-table-column(show-overflow-tooltip, label="状态")
          template(slot-scope="scope")
            span {{ scope.row.status | compare-list(statusSelect) }}
        el-table-column(show-overflow-tooltip, prop="level", label="层级")
          template(slot-scope="scope")
            span {{ scope.row.level | compare-list(levelSelect) }}
        el-table-column(show-overflow-tooltip, prop="executor", label="执行人")
        el-table-column(show-overflow-tooltip, prop="testTime", label="测试时间")
          template(slot-scope="scope")
            span {{ scope.row.testTime | date-format }}
        el-table-column(show-overflow-tooltip, prop="testResult", label="测试结果")
          template(slot-scope="scope")
            span {{ scope.row.testResult | compare-list(resultSelect) }}
        el-table-column(show-overflow-tooltip, prop="updateTime", label="更新时间")
          template(slot-scope="scope")
            span {{ scope.row.updateTime | date-format }}
        el-table-column(show-overflow-tooltip, prop="creator", label="创建人")
          template(slot-scope="scope")
            span {{ scope.row.creator | compare-list(creatorSelect) }}
        el-table-column(label="操作")
          template(slot-scope="scope")
            el-tooltip(content="详情")
              i.icon-act.el-icon-view
            el-tooltip(content="编辑")
              i.icon-act.el-icon-edit
            el-tooltip(content="执行")
              i.icon-act.el-icon-caret-right
            el-tooltip(content="删除")
              i.icon-act.el-icon-delete
    //- 分页
    el-pagination.test-pagination(
      background,
      layout="total, prev, pager, next, jumper",
      prev-text="上一页",
      next-text="下一页",
      @current-change="handleCurrentChange",
      :current-page="pageNum",
      :page-size="pageSize",
      :total="totalNum")
  test-popup(
    :title="tpTitle",
    :visible.sync="tpVisible",
    :is-edit="tpEdit",
    :parent-data="tpData",
    @submit="onPopupSubmit",
    @close="tpVisible = false")
</template>

<script>
import { mapGetters } from 'vuex';
import ProductData from '@/data/product';
import ProductBasicTree from '@/components/product/ProductBasicTree';
import TestPopup from './testPopup';

export default {
  name: 'protest',
  components: {
    ProductBasicTree,
    TestPopup
  },
  data() {
    return {
      treeLoading: false,
      // 左边部分
      treeData: [{
        id: '1',
        name: '',
        children: []
      }],
      // 右边部分
      loadingData: true,
      dataList: [],
      pageNum: 1,
      pageSize: 16,
      totalNum: 0,
      // 搜索条件
      product: null,
      proName: null,
      action: [null],
      // 新建popup
      tpTitle: '新建测试用例',
      tpVisible: false,
      tpEdit: false,
      tpData: {},
      // 搜索下拉框
      productSelect: [],
      statusSelect: [],
      levelSelect: [],
      creatorSelect: [],
      actionSelect: [
        { name: '全部', value: null },
        { name: '由我创建', value: 1 },
        { name: '由我评审', value: 2 },
        { name: '由我发布', value: 3 },
        { name: '由我执行', value: 4 }
      ],
      resultSelect: [
        { name: '通过', value: 1 },
        { name: '失败', value: 0 }
      ],
      testTypeSelect: [
        { name: 'ST', value: 'ST' },
        { name: 'SIT', value: 'SIT' },
        { name: 'SSIT', value: 'SSIT' },
        { name: 'UT', value: 'UT' }
      ]
    };
  },
  computed: {
    ...mapGetters([])
  },
  created() {
    this.productSelect = ProductData.productSelect;
    this.statusSelect = ProductData.statusSelect;
    this.levelSelect = ProductData.levelSelect;
    this.creatorSelect = ProductData.creatorSelect;
  },
  mounted() {
    this.loadTreeDetail();
    this.loadDataList();
  },
  methods: {
    // 处理tree详情
    dealTreeDetail(data) {
      // 根节点
      data[0].id = '1';
      this.dealChildren(data[0].children, data[0].id);
    },
    // 处理children的id
    dealChildren(array, prevPosi) {
      if (array && array.length) {
        array.forEach((item, index) => {
          const posi = `${prevPosi}-${index + 1}`;
          item.id = posi;
          this.dealChildren(item.children, posi);
        });
      }
    },
    // 获取tree detail
    loadTreeDetail() {
      this.treeLoading = true;
      setTimeout(() => {
        const data = JSON.parse(JSON.stringify(ProductData.treeData));
        this.dealTreeDetail(data);
        this.treeData = data;
        this.treeLoading = false;
      }, 500);
    },
    // 整理参数
    filterParams() {
      const params = {
        product: this.product,
        proName: this.proName,
        action: this.action
      };
      for (const key in params) {
        if (params[key] === null || params[key] === '') {
          delete params[key];
        }
      }
      return params;
    },
    // 取得表格数据
    loadDataList() {
      this.loadingData = true;
      // const params = this.filterParams();
      setTimeout(() => {
        this.dataList = ProductData.testList;
        this.totalNum = 70;
        this.loadingData = false;
      }, 500);
    },
    // 搜索
    search() {
      if (this.pageNum !== 1) {
        this.pageNum = 1;
      }
      this.loadDataList();
    },
    // 页码改变
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.loadDataList();
    },
    // 新建
    createTest(command) {
      this.tpData = {
        testLevel: command,
        testStepList: [],
        logList: [],
        testResult: [
          /* {
            title: '#1  最终结果：通过    执行人：王小明    测试时间：2018-05-04 10:23:45    测试系统：系统A',
            stepTable: [
              { step: '设置参数', expect: '界面正确显示', actual: '可微调', result: '失败', defect: '7849，9541' },
              { step: '启动', expect: '正常启动', actual: '正常启动', result: '通过' }
            ]
          } */
        ],
        defectList: [],
        allLinkList: [],
        fileList: [/* {
          name: 'food.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }, {
          name: 'food2.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        } */]
      };
      this.tpTitle = `新建测试用例${command}`;
      this.tpVisible = true;
      this.tpEdit = true;
    },
    // popup提交
    onPopupSubmit() {

    }
  }
};
</script>

<style lang="sass">
@import "../../../styles/utils"
$SEARCHHEIGHT: 56px
$PAGEHEIGHT: 56px
$SELECTWIDTH: 100px
$TREEWIDTH: 320px
$PADDINGWIDTH: 12px
.cp-product-test
  .test-search
    height: $SEARCHHEIGHT
    padding: 12px 0 12px 16px
    overflow-x: auto
    overflow-y: hidden
    .select-width
      width: $SELECTWIDTH
    .date-width
      width: 260px
    .el-form-item
      margin-right: 14px
    .el-form-item__label
      margin-left: 6px
      padding-right: 6px
    .el-date-editor .el-range__close-icon
      width: 20px
    .el-form-item--small .el-form-item__content, .el-form-item--small .el-form-item__label
      height: 32px
  .left-wrap
    position: absolute
    top: $SEARCHHEIGHT
    left: 16px
    bottom: $PADDINGWIDTH
    width: $TREEWIDTH
  .right-wrap
    position: absolute
    top: $SEARCHHEIGHT
    right: 16px
    bottom: 0
    left:  $TREEWIDTH + 32px
    .test-table
      position: absolute
      top: 0
      bottom: $PAGEHEIGHT
      left: 0
      right: 0
      overflow-x: hidden
      overflow-y: auto
      &::before
        display: none
    .el-table
      th, td
        text-align: center
    .test-pagination
      position: absolute
      bottom: 12px
      left: 0
      right: 0
      text-align: center
  .icon-act
    font-size: 16px
    font-weight: 500
    cursor: pointer
    margin-left: 3px
    margin-right: 3px
    &:hover
      color: #5D9BFB
</style>
